import React, { FC, useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@/components/ProTable';
import styles from './index.less';
import { useModel } from 'umi';
import { TableListItem } from '@/pages/Card/useCardModel';
import useCardModel from '@/pages/Card/useCardModel';
import { cardType } from '@/pages/Card/constants';
import ToolBar from './components/Toolbar';
import IconFont from '@/components/IconFont';
import ModalContent from './components/Modal';
import useHoxModel from './useHoxModel';
export const modelName = 'blankCard';

//定义setTimeout返回类型
// type TimerHandle = ReturnType<typeof setTimeout>;

interface CardProps {
  activeTab: string;
  normalActionRef: React.MutableRefObject<ActionType | undefined>;
}

const BlankCard: FC<CardProps> = ({ activeTab, normalActionRef }) => {
  const actionRef = useRef<ActionType>();
  const { getUnboundUserList, getCardType, getCardInfo } = useCardModel((model) => [
    model.getCardInfo,
  ]);
  const { selectedRowKeys, getBlankCardList, dispatch } = useHoxModel((model) => [
    model.selectedRowKeys,
    model.params,
  ]);
  const { showModal } = useModel('useCommonModal', (model) => ({ showModal: model.showModal }));

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      valueType: 'index',
      width: '10%',
    },
    {
      title: '卡号',
      dataIndex: 'cardNo',
      align: 'center',
    },
    {
      title: '创建时间',
      align: 'center',
      dataIndex: 'createTime',
      valueType: 'dateTime',
    },
    {
      title: '操作',
      key: 'option',
      width: '10%',
      valueType: 'option',
      render: (_, record, index) => [
        <a
          key={'loss'}
          className={styles['open-card']}
          onClick={async () => {
            getCardType();
            getUnboundUserList();
            getCardInfo({ id: record.id });
            showModal(modelName + 'open-card');
          }}
        >
          <IconFont type={'iconkaika'} />
          <span>开卡</span>
        </a>,
      ],
    },
  ];

  return (
    <>
      <ProTable<TableListItem>
        columns={columns}
        request={async (params: { [key: string]: any }) => {
          const data = await getBlankCardList({
            keyword: params.keyword || undefined,
            number: params.pageSize,
            page: params.current,
            status: cardType[activeTab],
          });
          return await {
            data: data?.list || [],
            success: true,
            total: data?.count || 0,
          };
        }}
        rowKey="id"
        rowSelection={{
          selectedRowKeys,
          onChange: (selectedRowKeys) => {
            dispatch({ selectedRowKeys });
          },
        }}
        tableAlertRender={false}
        actionRef={actionRef}
        dateFormatter="string"
        headerTitle={false}
        search={false}
        options={{
          search: {
            name: 'keyword',
          },
        }}
        toolBarRender={() => [<ToolBar actionRef={actionRef} />]}
      />
      <ModalContent actionRef={actionRef} normalActionRef={normalActionRef} />
    </>
  );
};
export default BlankCard;
